<template>
	<view class="container">
		<view class="navFixed">
			<!-- 这个地方是状态栏高度 -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<!-- 这个地方是导航栏高度 按钮文字胶囊部分 -->
			<view class="navContent" :style="{ height: navBarHeight + 'px', width: searchBoxWidth + 'px' }"></view>
		</view>
		<!-- 下面就是你开始操作的内容了哦.....开始开发吧 -->
		<view :style="{ paddingTop: statusBarHeight + navBarHeight + 'px' }" class="wrap">
			<view class="my-page">
				<!-- 用户信息区域 -->
				<view class="user-info">
					<image class="avatar" :src="Identification"></image>
					
					<view class="user-detail">
						<text class="user-name">{{name}}</text>
						<text class="user-account">账号：{{userId}}</text>
					</view>
				</view>
				<!-- 功能列表 -->
				<view class="function-list">
					 <u-cell-group title-bg-color="rgb(243, 244, 246)">
					      <u-cell
					        :titleStyle="{fontWeight: 500}"
					        :title="item.title"
					        v-for="(item, index) in list"
					        :key="index"
					        isLink
					        :icon="item.iconUrl"
					        @click="showToast(item)"
					      >
					      </u-cell>
					    </u-cell-group>
					
					<!-- <navigator url="/pages/setting/setting" class="list-item">
						<text class="item-text">设置</text>
						<image class="arrow" src="../../static/arrow-right.png"></image>
					</navigator>
					<navigator url="/pages/order/order" class="list-item">
						<text class="item-text">我的订单</text>
						<image class="arrow" src="../../static/arrow-right.png"></image>
					</navigator>
					<navigator url="/pages/coupon/coupon" class="list-item">
						<text class="item-text">我的优惠券</text>
						<image class="arrow" src="../../static/arrow-right.png"></image>
					</navigator> -->
				</view>
				<!-- 退出登录按钮 -->
				<button class="logout-btn" @click="logout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
import {removeToken} from '@/utils/auth';
import config from '@/config/config.js'
import defaultimg from '@/static/tabbar/mine_tn.png'
export default {
    data() {
        return {
			config:'',
			Identification: defaultimg,
			statusBarHeight: 0,
			navBarHeight: 0,
			searchBoxWidth: 0,
			name:this.$store.state.name,
			userId :this.$store.state.ueserId,
			 list: [
			        
			          {
			            type: "error",
			            icon: false,
			            title: "设置",
			            message: "一弦一柱思华年",
			            iconUrl: "https://uviewui.com/demo/toast/error.png",
			          },
			          {
			            type: "success",
			            title: "我的",
			            message: "庄生晓梦迷蝴蝶",
			            iconUrl: "https://uviewui.com/demo/toast/success.png",
			          },
			          // {
			          //   type: "loading",
			          //   title: "正在加载",
			          //   message: "正在加载",
			          //   iconUrl: "https://uviewui.com/demo/toast/loading.png",
			          // },
			          // {
			          //   type: "default",
			          //   title: "结束后跳转标签页",
			          //   message: "此情可待成追忆",
			          //   url: "/pages/componentsB/tag/tag",
			          //   iconUrl: "https://uviewui.com/demo/toast/jump.png",
			          // },
					  {
					    type: "default",
					    title: "用户隐私",
					    message: "锦瑟无端五十弦",
					    iconUrl: "https://uviewui.com/demo/toast/default.png",
					  },
			        ],
        };
    },
	async onLoad(options) {
		const info = uni.getSystemInfoSync();
		this.statusBarHeight = info.statusBarHeight;
		this.searchBoxWidth = info.searchBoxWidth;
		// #ifdef MP-WEIXIN
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight);
		this.searchBoxWidth = menuButtonInfo.left;
		// #endif
		const res = await driverinfo(this.$store.state.ueserId)
		console.log(res);
		this.config = config
		// this.driverInfo = res.driverInfo
		res.files[0] ? this.Identification = config.baseUrl + '/' + res.files[0] : ''  
		
	},
    methods: {
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: function (res) {
                    if (res.confirm) {
                        // 这里可以添加退出登录的逻辑，例如清除本地存储的 token 等
						removeToken()
						uni.navigateTo({
							url:'/pages/login/login'
						})
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.dflex() {
	display: flex;
	justify-content: center;
	align-items: center;
}
.container {
	width: 100%;
	height: 100%;
	.navFixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1030;
		width: 100%;
		background-color: #ffffff;
		.navContent {
			// .dflex();
			padding: 0 30rpx;
			height: 90rpx;
			box-sizing: border-box;
		}
	}
}
.wrap {
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;
	display: flex;
	justify-content: center;
	// align-items: center;
}
.my-page {
	width: 100%;
    padding: 20px;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
}

.user-detail {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 20px;
    font-weight: bold;
}

.user-account {
    font-size: 14px;
    color: #999;
}

.function-list {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.item-text {
    font-size: 16px;
}

.arrow {
    width: 12px;
    height: 12px;
}

.logout-btn {
    margin-top: 30px;
    background-color: #f00;
    color: #fff;
    border-radius: 5px;
    padding: 4px 10px;
}
</style>